<template>
  <div>
    <div class="page_tab_top">
      <div
        class="tab_list_item"
        @click="cutTab(1)"
        :class="currentIndex === 1 ? 'tab_active' : ''"
      >
        薪资等级
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(2)"
        :class="currentIndex === 2 ? 'tab_active' : ''"
      >
        加钟
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(3)"
        :class="currentIndex === 3 ? 'tab_active' : ''"
      >
        美团好评
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(4)"
        :class="currentIndex === 4 ? 'tab_active' : ''"
      >
        奖金
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(5)"
        :class="currentIndex === 5 ? 'tab_active' : ''"
      >
        完成率
      </div>
    </div>
    <Salarygrade
      ref="Salarygrade"
      v-show="this.currentIndex === 1"
    ></Salarygrade>
    <AddClock ref="AddClock" v-show="this.currentIndex === 2"></AddClock>
    <Acclaim ref="Acclaim" v-show="this.currentIndex === 3"></Acclaim>
    <bonus ref="bonus" v-show="this.currentIndex === 4"></bonus>
    <completionRate
      ref="completionRate"
      v-show="this.currentIndex === 5"
    ></completionRate>
  </div>
</template>
  
  <script>
import Salarygrade from "./Salarygrade.vue";
import AddClock from "./addClock.vue";
import Acclaim from "./acclaim.vue";
import bonus from "./bonus.vue";
import CompletionRate from "./CompletionRate.vue";

export default {
  components: {
    Salarygrade,
    AddClock,
    Acclaim,
    CompletionRate,
    bonus,
  },
  name: "Eryustoreadminindex",

  data() {
    return {
      currentIndex: 1,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.changeChild();
    });
  },

  methods: {
    //  // 顶部tab切换
    cutTab(i) {
      this.currentIndex = i;
      this.changeChild();
    },

    changeChild() {
      if (this.currentIndex === 1) {
        this.$refs.Salarygrade.resQ();
      } else if (this.currentIndex === 2) {
        this.$refs.AddClock.resQ();
      } else if (this.currentIndex === 3) {
        this.$refs.Acclaim.resQ();
      } else if (this.currentIndex === 4) {
        this.$refs.bonus.resQ();
      } else if (this.currentIndex === 5) {
        this.$refs.completionRate.resQ();
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
</style>